<template>
	<joy-page class="">
		<semp-notice-bar :arrayText="gonggao" showType="scrollTop" @click="noticeClick" bgColor="rgb(239, 239, 244)"></semp-notice-bar>
		<view class="ad-box">
			<navigator url="/pages/subjectiveLive/index">
				<view class="ad">
					<image src="http://liuup.com/img/ad-2.png" mode=""></image>
				</view>
			</navigator>
			<navigator url="/pages/objectiveLive/index">
				<view class="ad">
					<image src="http://liuup.com/img/ad-2.png" mode=""></image>
				</view>
			</navigator>
		</view>
		<uni-grid :gridList="grid" show-border="false" @click="handleClickGrid"></uni-grid>
		<uni-card title="学习包" extra="更多" @extraClick="goLearingPack">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in xxb" :key="index" :data-id="item.packageid"
				 @click="goLearingPackDetail">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="item.picture"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">
								<text style="">{{ item.packagename }}</text>
							</view>
							<view class="uni-media-list-text-body">
								<text style="">{{ item.packageabstract }}</text>
							</view>
							<view class="uni-media-list-text-bottom">
								<text style=""> {{ item.packageprice}} <span>元</span></text>
							</view>
						</view>
						<view style="uni-media-list-bottom"><button class="mini-btn" type="warn" size="mini" style="">立即购买</button></view>
					</view>
				</view>
			</view>
		</uni-card>
		<uni-card title="热门课程" extra="更多" @extraClick="goHostCourses">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in kc" :key="index" :data-id="item.curriculumid"
				 @click="goHostCoursesDetail">
					<view class="uni-media-list">
						<image class="uni-media-list-logo" :src="item.picture"></image>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">
								<text style="">{{ item.curriculumname }}</text>
							</view>
							<view class="uni-media-list-text-body">
								<text style="">{{ item.curriculumjj }}</text>
							</view>
							<view class="uni-media-list-text-bottom">
								<text style=""> {{ item.price}} <span>元</span></text>
							</view>
						</view>
						<view style="uni-media-list-bottom"><button class="mini-btn" type="warn" size="mini" style="">立即购买</button></view>
					</view>
				</view>
			</view>
		</uni-card>
	</joy-page>
</template>

<script>
	import mSwiper from "@/components/m-swiper/m-swiper.vue"
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniCard from "@/components/uni-card/uni-card.vue"
	import mPageView from "@/components/m-page-view/m-page-view.vue"
	import uniNoticeBar from "@/components/uni-notice-bar/uni-notice-bar.vue"
	import sempNoticeBar from "@/components/semp-notice-bar/semp-notice-bar.vue"
	import indexApi from '@/api/index.js'

	var _this;
	export default {
		components: {
			mSwiper,
			uniGrid,
			uniCard,
			sempNoticeBar,
			"joy-page": mPageView
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		data() {
			return {
				banner: [],
				grid: [],
				ka: [],
				adList: [],
				gonggao: [],
				xxb: [],
				kc: []
			}
		},
		onLoad(query) {
			_this = this;
			console.log("APP进入首页");
			this.initData();
			_this.getGrid()
		},
		methods: {
			getGrid(){
				_this.grid=[{id:0,text:'客观速记',image:'http://liuup.com/img/grid-3.png',path:'/pages/objectiveShorthand/index'},
							{id:1,text:'主观案例',image:'http://liuup.com/img/grid-3.png',path:'/pages/subjectiveCase/index'},
							{id:2,text:'论述高分',image:'http://liuup.com/img/grid-3.png',path:'/pages/discussMark/index'}]
			},
			initData() {
				indexApi.index().then(res => {
					//公告
					_this.gonggao = res.data.gg || []
					//学习包
					_this.xxb = res.data.xxb || []
					_this.xxb.forEach((item, index) => {
						item.packageabstract = item.packageabstract.slice(0, 10) + '...'
					})
					//课程
					_this.kc = res.data.kc || []
					_this.kc.forEach((item, index) => {
						item.curriculumjj = item.curriculumjj.slice(0, 10) + '...'
					})
					// console.log(_this.gonggao)
					// console.log(_this.xxb)
					// console.log(_this.kc)
				})
			},
			handleClickGrid(index) {
				let item = this.grid[index]
				console.log(item.path)
				uni.navigateTo({
					url: item.path
				})
			},

			noticeClick(e) {
				console.log(e)
				let id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/notice/index?id=' + id
				})
			},
			goLearingPack(e) {
				uni.navigateTo({
					url: '/pages/learningPack/index'
				})
			},
			goLearingPackDetail(e) {
				console.log(e)
				let {
					id
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: `/pages/learningPack/detail?id=${id}`
				})
			},
			goHostCoursesDetail(e) {
				console.log(e)
				let {
					id
				} = e.currentTarget.dataset
				uni.navigateTo({
					url: `/pages/hotCourses/detail?id=${id}`
				})
			},
			goHostCourses(e) {
				uni.navigateTo({
					url: '/pages/hotCourses/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../common/uni/uni.css");

	body,
	page {
		min-height: 100%;
		display: flex;
		font-size: 32upx;
	}

	body.modal-open {
		position: fixed;
		width: 100%;
	}

	.ad-box {
		display: flex;
		justify-content: center;
		background: #fff;

		/* margin-top: 10upx; */
		.ad {
			image {

				width: 335upx;
				height: 185upx;
				margin: 15upx;
			}
		}
	}

	/* #ifdef MP-BAIDU */
	page {
		width: 100%;
		height: 100%;
		display: block;
	}



	swan-template {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	/* #endif */

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #efeff4;
		width: 100%;
	}

	.pad-10 {
		padding: 10upx;
	}

	.mt-10 {
		margin-top: 10upx;
	}

	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.input-row {
		display: flex;
		flex-direction: row;
		position: relative;
		background: #fff;
	}

	.input-row .title {
		width: 25%;
		padding: 20upx 0;
		padding-left: 20upx;
		line-height: 50upx;
	}

	.border-1px {
		position: relative;

		&::before {
			position: absolute;
			z-index: 1;
			right: 0;
			top: 0;
			left: 0upx;
			height: 1upx;
			content: '';
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #e2e2e2;
		}

		&::after {
			position: absolute;
			z-index: 1;
			right: 0;
			bottom: 0;
			left: 0upx;
			height: 1upx;
			content: '';
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #e2e2e2;
		}
	}

	.border-bottom-1px {
		position: relative;

		&::after {
			position: absolute;
			z-index: 1;
			right: 0;
			bottom: 0;
			left: 20upx;
			height: 1upx;
			content: '';
			-webkit-transform: scaleY(.5);
			transform: scaleY(.5);
			background-color: #e2e2e2;
		}
	}

	.btn-row {
		margin-top: 50upx;
		padding: 20upx;
	}

	button.primary {
		background-color: #0faeff;
	}

	.ka {
		width: 100%;
		height: 260upx;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			transform-origin: center;
			box-sizing: border-box;
			pointer-events: none;
			top: -50%;
			left: -50%;
			right: -50%;
			bottom: -50%;
			border-bottom: 1px solid $uni-border-color;
			transform: scale(.5);
		}
	}


	.uni-media-list {
		padding: 10px 10px;
	}

	.uni-media-list-logo {
		width: 220upx;
		height: 160upx;
	}

	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
	}

	.uni-media-list-bottom {
		margin: auto;
	}

	.uni-media-list-bottom button {
		font-size: 10px;
		padding: 0 0.5em;
	}

	.uni-media-list-text-top {
		// height: 60upx;
		font-size: 28upx;

	}

	.uni-media-list-text-body {
		// height: 60upx;
		font-size: 28upx;

	}

	.uni-media-list-text-bottom {
		// height: 60upx;
		font-size: 28upx;

	}

	.uni-list::before,
	.uni-list:after {
		height: 0px;
	}
</style>
